<template>
  <div class="w-h-100" style="display: flex;flex-direction:column;">
    <!--  导航栏部分  -->
    <div class="van-header">
      <van-nav-bar
          @con-click-back="back"
          title="我的作品"
          left-arrow>
        <template #right>
          <a @click="up">上传</a>
        </template>
      </van-nav-bar>
    </div>
    <div class="body-worksList">
      <!--      每一个作品-->
      <div @click="worksDetailClick(item)" class="works-row" v-for="(item,index) in WorksList" :key="index">
        <!--        img+基本信息 -->
        <div style="height: 65%;width: 100%;display: flex;flex-direction: row">
          <!--          图片-->
          <div style="height: 80%;width: 40%;">
            <van-image style="height: 100%;width: 100%;"
                       :src="item.coverImg"
            />
          </div>
          <!--          基本信息-->
          <div style="display:flex;height: 100%;width: 60%;margin-left:10px;">
            <!--            作品基本信息-->
            <div style="display: flex;flex-direction: column;height: 100%;width: 70%">
              <span
                  style="font-size:15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; word-break: normal;">{{
                  item.tutorialName
                }}</span>
              <span style="font-size:12px;margin-top:20px">学生：{{ item.nickName }}</span>
              <span style="margin:5px 0;font-size:12px;">指导老师:{{ item.videoInstructor }}</span>
            </div>
            <!--            评分-->
            <div style="display: flex;height: 100%;width: 30%;">
              <div class="grade">
                <div class="grade_span"><span
                    style="text-align: center">{{ parseInt(item.number.replace("分", '')).toFixed(1) }}</span></div>
                <span class="grade_text">视频得分</span>
              </div>
            </div>
          </div>


        </div>
        <!--        作品内容-->
        <div style="height: 60%;width: 100%;">
          <van-field
              style="border-radius: 10px;padding-left: 4px"
              disabled
              v-model="item.tutorialIntroduct"
              type="textarea"
          />
        </div>


      </div>

    </div>
    <div>
    </div>

  </div>
</template>

<script>
import {getVideolListById} from "@/api/request";

export default {
  name: 'index',
  data() {
    return {
      WorksList: [],
      coverImgDataUrl: '',
      constants: {},
    };
  },
  methods: {
    /**
     * 获取学生列表
     */
    getWorksList() {
      const params = {
        pageSize: 100,
        pageIndex: 1,
        tutorialName: ''
      }
      getVideolListById(params).then(res => {
        const list = res.data.list
        for (let i = 0; i < list.length; i++) {
          const obj = list[i]
          obj.number = obj.videoScore + "分"
          obj.videoScore = (obj.videoScore / 100) * 5
        }
        this.WorksList = list
      })
    },
    worksDetailClick(row) {

      this.$router.push({name: 'detailH5', query: {studentWorks: row}})
    },

    back() {
      alert('header头部， 点击返回')
    },
    up() {
      this.$router.push("/videoH5")
    },
    edit() {
      alert('item作品， 点击详情')

    }
  },
  mounted() {
    //每次挂载完成就查询
    this.getWorksList()
  }

}
</script>


<style scoped>
/*布局样式*/
/deep/ .van-nav-bar__right {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}

/deep/ .van-nav-bar__title {
  font-size: 17px;
  font-weight: 500;
  color: #333333;
}

.van-header {
  height: 50px;
}

.body-worksList {
  padding: 0 10px 10px 10px;
  height: calc(100% - 70px);
  overflow-y:auto
}

/deep/ .van-nav-bar .van-icon {
  color: #3D3D3D !important;
}

.works-row {
  height: 160px;
  width: calc(100% - 20px);
  margin: 30px 10px;
}

.grade {
  display: flex;
  float: right;
  flex-direction: column;
  height: 60%;
  width: 90%;
  background: #F8F2EA;
  border-radius: 4px;
  justify-content: center;
  text-align: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 90%, 0 100%);
}

.grade_span {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  color: #A48C6F;
}

.grade_text {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  color: #A48C6F;
  font-size: 9px;
}

/deep/ .van-field--min-height {
  padding-left: 0;
  padding-right: 0;
  background-color: #F8F9FB;
}

/*封面圆角*/
/deep/ .van-image__img {
  border-radius: 10px;
}
</style>
